App.require(function () {
    var app = App.getCurrent();

    app.defineLayer("str-img-pattern", {
        render: function (next) {
            this.initProperty();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            var property = this.property;

            property.id = property.id || this.uid;

            if (property.src) {
                this.pushImageSrc(property.src);
                this.setPattern({
                    id: property.id,
                    src: this.src,
                    repeat: this.repeat
                });
            }
        },
        draw: function () {
            return true;
        },
        resetOption: function () {
            var property = this.property;
            var parentCanvas = this._getCanvas();
            var components = parentCanvas.getUsePatterns(property.id);
            parentCanvas.resetPatternById({
                id: property.id,
                src: this.src,
                repeat: this.repeat
            });
            if (!components) return;
            for (var i = 0; i < components.length; i++) components[i].data.isChange = true;
        },
        get src() {
            return this.getValue("src");
        },
        set src(value) {
            if (this.setValue("src", value)) {
               this.resetOption();
                if (value) this.pushImageSrc(value);
            }
        },
        set repeat(value) {
            if (this.setValue("repeat", value)) this.resetOption();
        },
        get repeat() {
            return this.getValue("repeat");
        }
    })
})